import React, { useState } from 'react';
import { useIntl } from 'umi';
import { Button, Card, Statistic } from 'antd';
import ProCard from '@ant-design/pro-card';
import SetChangePassword from './SetChangePassword';
import SetChangePhone from './SetChangePhone';
import SetKeyModle from './SetKeyModle';

import style from './index.less';
const { Divider } = ProCard;

const AccountPasswordSet: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const [responsive, setResponsive] = useState(false);

  const [open, setOpen] = useState(false);
  const [openKey, setOpenKey] = useState(false);
  const [phoneOpen, setphoneOpen] = useState(false);
  const [titleflag, setTitleflag] = useState(1);
  const [phoneTitleflag, setPhoneTitleflag] = useState(1);

  const showModal = () => {
    setOpen(true);
  };

  const hideModal = () => {
    setOpen(false);
    setTitleflag(1);
  };
  const showPhoneModal = () => {
    setphoneOpen(true);
  };

  const hidePhoneModal = () => {
    setphoneOpen(false);
    setPhoneTitleflag(1);
  };

  const showKeyModal = () => {
    setOpenKey(true);
  };
  const hideKeyModal = () => {
    setOpenKey(false);
  };
  return (
    <div className={style.AccountPasswordSetboss}>
      <ProCard
        // title="账号与密码设置"
        title={t('menu.AccountPasswordSettings')}
        direction={responsive ? 'column' : 'row'}
        style={{ marginBlockStart: 8 }}
        gutter={[16, 16]}
        wrap
      >
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic
            title="登录密码"
            value="登录跨境e账通时使用的密码"
            precision={2}
          />
          <Button
            type="link"
            onClick={() => {
              setOpen(true);
            }}
          >
            {/* 修改 */}
            {t('buttons.Modify')}
          </Button>
        </ProCard>
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic
            title="修改交易密码"
            value="账户资金支出或资料变更时，需先验证交易密码"
            precision={2}
          />
          <Button
            type="link"
            onClick={() => {
              setOpen(true);
              setTitleflag(2);
            }}
          >
            {/* 修改 */}
            {t('buttons.Modify')}
          </Button>
        </ProCard>

        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic title="手机号" value={13291035650} />
          <Button
            type="link"
            onClick={() => {
              showPhoneModal(true);
            }}
          >
            {t('buttons.Modify')}
            {/* 修改 */}
          </Button>
        </ProCard>

        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic title="邮箱" value={'1453625725@qq.com'} />
          <Button
            type="link"
            onClick={() => {
              showPhoneModal(true);
              setPhoneTitleflag(2);
            }}
          >
            {t('buttons.Modify')}
            {/* 修改 */}
          </Button>
        </ProCard>

        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          bordered
        >
          <Statistic title="密钥设置" value=" " />
          <Button
            type="link"
            onClick={() => {
              showKeyModal(true);
            }}
          >
            {t('buttons.Modify')}
            {/* 修改 */}
          </Button>
        </ProCard>
      </ProCard>
      {/* </RcResizeObserver> */}
      <SetChangePhone
        showModal={showPhoneModal}
        hideModal={hidePhoneModal}
        open={phoneOpen}
        titleflag={phoneTitleflag}
      />
      <SetChangePassword
        showModal={showModal}
        hideModal={hideModal}
        open={open}
        titleflag={titleflag}
      />

      <SetKeyModle
        showModal={showKeyModal}
        hideModal={hideKeyModal}
        open={openKey}
      />
    </div>
  );
};

export default AccountPasswordSet;
